<template>
  <div class="sys-login">
    <div class="dowebok">
      <div class="logo"></div>
      <div class="form-item">
        <input id="username"
               type="text"
               v-model="loginForm.userId"
               placeholder="用户名">
      </div>
      <div class="form-item">
        <input id="password"
               type="password"
               v-model="loginForm.passWord"
               @keyup.enter="submitForm"
               placeholder="密码">
      </div>
      <div class="form-item">
        <el-button id="submit"
                   @click="submitForm">登 录</el-button>
      </div>
      <div class="reg-bar">
        <span>请使用RTX登录</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { login, addUser } from '@/api/login'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      loginForm: {
        userId: null,
        passWord: null
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    submitForm() {
      if (this.loginForm.userId === '' || this.loginForm.userId === null) {
        this.$message({
          type: 'error',
          message: '请输入用户名!'
        })
      } else if (this.loginForm.passWord === '' || this.loginForm.passWord === null) {
        this.$message({
          type: 'error',
          message: '请输入密码!'
        })
      } else {
        this.loginByUser()
      }
    },
    loginByUser() {
      login(this.loginForm).then(res => {
        if (res.data.success) {
          const result = res.data.data
          if (result !== '401') {
            const data = result
            const user = {
              userId: data.id,
              userName: data.name,
              mobile: data.mobile,
              department: data.department[0],
              isEdit: false
            }
            this.addUserInfo(user)
          } else {
            this.$message({
              type: 'error',
              message: '用户/密码错误，请重新输入!'
            })
          }
        }
      })
    },
    addUserInfo(user) {
      addUser(user).then(res => {
        if (res.data.success) {
          const result = res.data.data[0]
          let _user = {
            id: result.userId,
            name: result.userName,
            department: result.department,
            isEdit: result.isEdit
          }
          this.$store.commit('SET_USERINFO', _user)
          Cookies.set('isLogin', true)
          Cookies.set('userInfo', JSON.stringify(_user))
          this.$router.replace('/')
        }
      })
    }
  }
}
</script>
 <style lang="scss">
::-webkit-input-placeholder {
  color: #fff;
}

:-moz-placeholder {
  color: #fff;
}

::-moz-placeholder {
  color: #fff;
}

:-ms-input-placeholder {
  color: #fff;
}
.sys-login,
#app {
  width: 100%;
  height: 100%;
}
.sys-login {
  background: #fff url(../../assets/images/backgroud.png) 50% 50% no-repeat;
  background-size: cover;
}
.dowebok {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 550px;
  margin: -300px 0 0 -215px;
  border: 1px solid #fff;
  border-radius: 20px;
  overflow: hidden;
  // background-color: #ccc;
  .logo {
    width: 104px;
    height: 104px;
    margin: 50px auto 80px;
    background: url(../../assets/images/login.png) 0 0 no-repeat;
  }
  .form-item {
    position: relative;
    width: 360px;
    margin: 0 auto;
    padding-bottom: 30px;
  }
  .form-item input {
    width: 100%;
    height: 48px;
    padding-left: 70px;
    border: 1px solid #fff;
    border-radius: 25px;
    font-size: 18px;
    color: #fff;
    background-color: transparent;
    outline: none;
  }

  .form-item button {
    width: 360px;
    height: 50px;
    border: 0;
    border-radius: 25px;
    font-size: 18px;
    color: #1f6f4a;
    outline: none;
    cursor: pointer;
    background-color: #fff;
  }

  #username {
    background: url(../../assets/images/emil.png) 20px 14px no-repeat;
  }

  #password {
    background: url(../../assets/images/password.png) 23px 11px no-repeat;
  }
  .reg-bar {
    width: 360px;
    margin: 20px auto 0;
    font-size: 14px;
    overflow: hidden;
    text-align: center;
  }

  .reg-bar span {
    color: #fff;
  }
}
</style>
